<template>
  <!-- 修复管理组件 -->
  <div v-show="showRepair">
    <div class="dialog_wrap" v-dialogDrag="true">
      <div class="dialog_content">
        <!-- 可按下拖动的位置 -->
        <div class="dialog_header">
          <div class="detect_box_title">修复专题</div>
          <div class="close_btn" @click="closeQuery">×</div>
        </div>
        <!-- 其他区域 -->
        <div class="dialog_content_a">
          <!-- <el-button @click="resetChecked">reset</el-button> -->
          <el-tree
            ref="treeRef"
            :data="data"
            show-checkbox
            default-expand-all
            highlight-current
            :props="defaultProps"
            @check-change="handleCheck"
            v-loading="loading"
            node-key="id"
            :check-on-click-node="true"
          />
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { Map } from 'ol'
import View from 'ol/View.js'
import 'ol/ol.css'
import VectorLayer from 'ol/layer/Vector.js'
import VectorSource from 'ol/source/Vector.js'
import { Stroke, Style, Circle, Fill } from 'ol/style'
import Text from 'ol/style/Text.js'
import Feature from 'ol/Feature.js'
import Point from 'ol/geom/Point.js'
import LineString from 'ol/geom/LineString.js'
import Polygon from 'ol/geom/Polygon.js'
import Draw, { createBox, createRegularPolygon } from 'ol/interaction/Draw.js'
import * as turf from '@turf/turf' //引入turf做buffer缓冲区分析
import { composeCssTransform } from 'ol/transform'
import { transform } from 'ol/proj'
import { onMounted, ref, toRaw, defineComponent, reactive, watch } from 'vue'
import { VXETable } from 'vxe-table'
import Icon from 'ol/style/Icon.js'
import { require } from '@/utils/require'
import XEUtils from 'xe-utils'
import {
  getJCGLInfo,
  getJCGLSearch,
  getJCWhole,
  getXFSearch,
  getXFInfo,
  getSpatialInfo,
  getPipePointInfo,
  getPipeInfo,
  getXf,
  getXfTree,
} from '@/api/index'
import $ from 'jquery'
import axios from 'axios'
//使用mitt进行任意组件通信
import emitter from '@/utils/bus'
// 引入饿了么UI
import 'element-plus/es/components/message/style/css'
import { ElMessage } from 'element-plus'
import {
  Document,
  Menu as IconMenu,
  Location,
  Setting,
} from '@element-plus/icons-vue'
// 引入echarts
import * as echarts from 'echarts'
//测试用菠萝存储地图容器
import {
  userMap,
  mapStyle,
  switchList2,
  switchList5,
  switchList6,
  switchList7,
  switchList8,
  switchList9,
} from '../../store/index'
let map = userMap() //接收
let list
let switchStyle
let storeStyle = mapStyle() //接受样式
let storeSwitch = switchList2()
// 控制修复菜单显隐
const showRepair = ref(false)
let storeKJCX = switchList5()
let storeRepair = switchList6()
let storeDetect = switchList7()
let storeCube = switchList8()
let storeDia = switchList9()
let changeRepair

watch(storeRepair, () => {
  changeRepair = toRaw(storeRepair.queryBtn)
  if (changeRepair == true) {
    if (toRaw(storeDia.queryBtn) == true) {
      // console.log('诊断打开', toRaw(storeDia.queryBtn))
      storeDia.queryBtn = false
      showRepair.value = true
      // 展开一个关闭其他:空间查询探测检测
      storeKJCX.queryBtn = false
      storeDetect.queryBtn = false
      storeCube.queryBtn = false
    } else {
      showRepair.value = true
      // 展开一个关闭其他:空间查询探测检测
      storeKJCX.queryBtn = false
      storeDetect.queryBtn = false
      storeCube.queryBtn = false
    }
  } else {
    closeQuery()
  }
})
const resetChecked = () => {
  treeRef.value.setCheckedNodes([], false)
  console.log('关闭检测', treeRef.value.getCheckedNodes())
}
const closeQuery = () => {
  showRepair.value = false
  storeRepair.queryBtn = false
  resetChecked()
  // repairSource.clear()
  const arr = list.getLayers().getArray()
  for (let i = 0; i < arr.length; i++) {
    if (arr[i].values_.title != 'GeoJSON' && arr[i].className_ != 'myTdt') {
      // console.log('调试图层名', arr[i].values_.title)
      arr[i].getSource().clear()
    }
  }
}
let repairFeature
let repairSource
let repairLayer
onMounted(() => {
  list = toRaw(map.map)
  switchStyle = toRaw(storeStyle.map_style)
  // 注册修复图层
  repairSource = new VectorSource({
    wrapX: false,
  })
  repairLayer = new VectorLayer({
    source: repairSource,
    zIndex: 9999,
  })
  list.addLayer(repairLayer)
  openList()
})
// 树结构表单
const treeRef = ref()
const defaultProps = {
  children: 'children',
  label: 'label',
  disabled: 'disabled',
}
const data = ref([])
//滚动loading
const loading = ref(false)
const openList = () => {
  getXfTree().then((res) => {
    if (res.code == 200 && res.data.length >= 1) {
      console.log('修复', res.data)
      const arr = res.data
      const _arr = []
      for (let i = 0; i < arr.length; i++) {
        const url = arr[i].eid
        const index = url.lastIndexOf('-')
        const str = url.substring(index + 1, url.length)
        if (str != 'null') {
          const value = arr[i].tag + '(' + arr[i].lengths + 'm)'
          _arr.push(Object.assign({}, arr[i], { eidPlus: value }))
        }
      }
      const list = _arr
      let res2 = []
      const obj2 = XEUtils.groupBy(list, 'testingAddress')
      XEUtils.each(obj2, (childs, key) => {
        const obj4 = XEUtils.groupBy(childs, 'testingCompany')
        const a = obj4
        const arr = []
        for (let key2 in a) {
          // console.log('第三级', key2, a[key2])
          const obj5 = XEUtils.groupBy(a[key2], 'eidPlus')
          const b = obj5
          const arr2 = []
          for (let key3 in b) {
            arr2.push({
              id: key3,
              label: key3,
              Features: b[key3],
            })
          }
          arr.push({
            id: key2,
            label: key2,
            disabled: true,
            children: arr2,
          })
        }
        const obj3 = {
          id: key,
          label: key,
          disabled: true,
          children: arr,
        }
        res2.push(obj3)
      })
      data.value = res2
      loading.value = false
      console.log('修复目录', _arr)
      /* 修复分割线 */
    } else {
      console.log('暂无数据', res)
    }
  })
}
const eVal = ref('')
const handleCheck = (checkedNodes, isChecked) => {
  // console.log(Nodes.checkedNodes)
  if (toRaw(checkedNodes).children == undefined && isChecked == true) {
    const serve = toRaw(checkedNodes).Features
    getXf(serve[0].eid).then((res) => {
      console.log(res, serve)
      const arr = res.data
      for (let i = 0; i < arr.length; i++) {
        list.getView().setResolution(0.52916772500211673)
        list.getView().setCenter([arr[0].testingStartX, arr[0].testingStartY])
        const arr1 = [arr[i].testingStartX, arr[i].testingStartY]
        const arr2 = [arr[i].testingEndX, arr[i].testingEndY]
        const url = arr[i].eid
        const index = url.lastIndexOf('-')
        const str = url.substring(index + 1, url.length)
        if (str != 'null' || arr[i].location != 'null') {
          const value = arr[i].tag + '(' + arr[i].lengths + 'm)'
          eVal.value = value
        }
        // 坐标为0就不展示
        repairFeature = new Feature({
          geometry: new LineString([arr1, arr2]),
          attributes: [[arr[i].startId], [arr[i].endId]],
          attributes2: arr[i].featId,
          handleCompany: arr[i].handleCompany,
          eidPlus: eVal.value,
          layerName: 'repairLayer',
        })
        repairFeature.setStyle(
          new Style({
            stroke: new Stroke({
              color: `#067e06`,
              width: 3,
            }),
          })
        )
        repairSource.addFeature(repairFeature)
      }
    })
  } else if (toRaw(checkedNodes).children == undefined && isChecked == false) {
    repairSource.forEachFeature((feature) => {
      console.log(feature.values_.eidPlus, toRaw(checkedNodes).label)
      if (feature.values_.eidPlus == toRaw(checkedNodes).label) {
        repairSource.removeFeature(feature)
      }
    })
  }
}
</script>
<style lang="less" scoped>
.dialog_content {
  position: fixed;
  top: 50px;
  left: 8px;
  width: 370px;
  border: 1px solid #80eeff;
  background: #0a163cc9;

  .dialog_header {
    height: 50px;
    width: 100%;
  }
}
.dialog_wrap {
  .dialog_content_a {
    overflow: auto;
    height: 53vh;
    width: 369px;
  }
  :deep(.dialog_content_a) {
    scrollbar-color: #0a163cc9 #80eeff; /* 第一个方块颜色，第二个轨道颜色(用于更改火狐浏览器样式) */
    scrollbar-width: thin; /* 火狐滚动条无法自定义宽度，只能通过此属性使滚动条宽度变细 */
    -ms-overflow-style: none; /* 隐藏滚动条（在IE和Edge两个浏览器中很难更改样式，固采取隐藏方式） */
  }
  :deep(.dialog_content_a::-webkit-scrollbar) {
    width: 3px;
    height: 3px; // 纵向滚动条 必写
  }
  :deep(.dialog_content_a::-webkit-scrollbar-corner) {
    background: #0a163cc9;
  }
  :deep(.dialog_content_a::-webkit-scrollbar-thumb) {
    background-color: #80eeffce;
    // border: 1px dashed #888888;
    width: 2px;
    height: 80px;
  }
  :deep(.el-tree) {
    background: #0a163c5d;
    color: #fff;
    --el-tree-node-hover-bg-color: #0a163cc9;
    width: 500px;
    overflow-x: scroll;
  }
  :deep(
      .el-tree--highlight-current
        .el-tree-node.is-current
        > .el-tree-node__content
    ) {
    background: #0a163c5d;
  }
}
//修复菜单栏
.close_btn {
  color: #80eeff;
  position: absolute;
  font-size: 40px;
  right: 5px;
  top: -18px;
  cursor: pointer;
}
// 标题
.detect_box_title {
     text-align: center;
    background: #0e1d4cc9;
    height: 36px;
    line-height: 32px;
    border-bottom: 1px solid #80eeff;
    font-size: 17px;
    font-weight: 600;
    color: #80eeff;
}
/* 修复底部按钮组 */
.open_btns {
  position: absolute;
  right: 15px;
  bottom: 18px;
}
.open_btns button {
  margin: 0 5px 0 0;
  padding: 0;
  width: 75px;
  height: 22.8167px;
  border-radius: 10px;
  border: 1px solid #2ba3ff;
  color: #2ba3ff;
}
/* 折叠菜单 */
.fade-enter-active,
.fade-leave-active {
  transition: all 0.3s;
}

.fade-enter-from,
.fade-leave-to {
  transform: translateX(-350px);
}
// 旋转按钮
.aa {
  position: absolute;
  background: #ffffff;
  height: 70px;
  width: 8px;
  right: -8px;
  z-index: 9999;
  top: 230px;
  cursor: pointer;
}
.aa img {
  position: absolute;
  top: 30px;
  width: 100%;
  transition: all 0.5s;
}
.go {
  position: absolute;
  background: #ffffff;
  height: 70px;
  width: 8px;
  // right: 0px;
  z-index: 9999;
  top: 230px;
  cursor: pointer;
}
.go img {
  position: absolute;
  top: 30px;
  width: 100%;
  transition: all 0.5s;
  transform: rotate(180deg);
}

// 轮播图
.bannerimg {
  width: 100%;
  height: 400px;
}
.poly {
  :deep(.el-carousel__indicator--horizontal .el-carousel__button) {
    width: 10px;
    height: 10px;
    background: transparent;
    border: 1px solid #ffffff;
    border-radius: 50%;
    opacity: 0.5;
  }
  :deep(.el-carousel__indicator--horizontal.is-active .el-carousel__button) {
    width: 10px;
    height: 10px;
    background: #ffffff;
    border-radius: 50%;
    opacity: 1;
  }
  :deep(.el-carousel__container) {
    height: 400px;
  }
}
// 图片弹窗头
.picPop {
  :deep(.vxe-modal--wrapper .vxe-modal--header) {
    background: #2a88e1 !important;
    color: #fff;
  }
  :deep(.vxe-modal--header-right) {
    transform: translateY(6%);
    font-size: 18px;
  }
}
// 管理弹窗头
.vxe_box {
  // :deep(.vxe-modal--wrapper .vxe-modal--header) {
  //   background: url(../.././assets/images/k_db.png) 0px 0px / 100% 100%
  //     no-repeat !important;
  // }
  // :deep(.vxe-modal--header-right) {
  //   color: #fff;
  //   transform: translateY(5%);
  //   font-size: 18px;
  // }
  // 修改input
  :deep(.vxe-input) {
    display: inline-block;
    position: relative;
    width: 310px;
    margin: 15px;
  }
  :deep(.vxe-input .vxe-input--search-icon) {
    color: #1c9cfe;
  }
  // 修改表头
  :deep(thead) {
    font-size: 13px;
    height: 10px;
  }
  :deep(tbody) {
    font-size: 13px;
  }
  :deep(.vxe-header--column) {
    line-height: 5px;
  }
  :deep(.body--wrapper) {
    scrollbar-color: #0a163cc9 #80eeff; /* 第一个方块颜色，第二个轨道颜色(用于更改火狐浏览器样式) */
    scrollbar-width: thin; /* 火狐滚动条无法自定义宽度，只能通过此属性使滚动条宽度变细 */
    -ms-overflow-style: none; /* 隐藏滚动条（在IE和Edge两个浏览器中很难更改样式，固采取隐藏方式） */
  }
  :deep(.body--wrapper::-webkit-scrollbar) {
    width: 3px;
    height: 4px;
  }
  :deep(.body--wrapper::-webkit-scrollbar-thumb) {
    background-color: #80eeffce;
    // border: 1px dashed #888888;
    width: 2px;
    height: 80px;
  }
}
.JC_title span {
  font-size: 20px;
}
// 检测弹窗选项
.first_line {
  font-size: 18px;
  display: flex;
  justify-content: space-between;
  padding: 0 10px;
}
.first_line span {
  margin-right: 20px;
}
.second_line {
  font-size: 18px;
  margin-top: 7px;
  display: flex;
  justify-content: space-around;
  padding: 0 50px;
}
.third_line {
  font-size: 13.5px;
  font-weight: 500;
  width: 350px;
  // background: #e0dbdb;
  padding: 0 15px;
}
.third_line_a {
  display: inline-block;
  margin-right: 20px;
  transform: translateY(-5px);
}
.third_line button {
  position: absolute;
  right: 24px;
  top: 19.1%;
  margin: 0;
  padding: 0;
  width: 50px;
  border-radius: 10px;
  border: 1px solid #2ba3ff; //自定义边框
  color: #2ba3ff;
}
.el-span {
  display: inline-block;
  margin-right: 30px;
  transform: translateY(-5px);
}

// 修复
.XF_first_line {
  float: right;
  width: 950px; //修改进度条宽度
}
.XF_first_line_a {
  margin-left: 300px;
}
.XF_first_line span {
  margin-right: 20px;
}
.XF_second_line {
  display: inline-block;
  margin-right: 30px;
}

.vxe-button.type--button {
  float: right;
}
// 折叠按钮
.foldable_btn {
  float: right;
  margin-top: 0.5%;
}
/* 
    img 外侧盒子
*/
.guild_img_box {
  position: relative;
  width: 600px;
  height: 400px;
  margin: 0 auto;
  display: block;
  margin-bottom: 16px;
  box-shadow: 0 2px 4px -1px rgb(0 0 0 / 20%), 0 4px 5px 0 rgb(0 0 0 / 14%),
    0 1px 10px 0 rgb(0 0 0 / 12%) !important;
  border: 1px solid #e9e9e9;
  overflow: hidden;
}
.guild_img_box > img {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  width: 100%;
  height: 100%;
}
.testReport {
  position: relative;
  width: 900px;
  height: 500px;
  margin: 0 auto;
  display: block;
  margin-bottom: 16px;
  box-shadow: 0 2px 4px -1px rgb(0 0 0 / 20%), 0 4px 5px 0 rgb(0 0 0 / 14%),
    0 1px 10px 0 rgb(0 0 0 / 12%) !important;
  border: 1px solid #e9e9e9;
  overflow: hidden;
}

.testReport > iframe {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  max-width: 100%;
  max-height: 100%;
}
</style>
